
import React from "react";
import {Link} from 'react-router';
import Relay from "react-relay";
import {_Input,_Button,_Icon,_Modal} from 'ANT_DE';
const Input = _Input,
    Button = _Button,
    Icon = _Icon, Modal = _Modal;

import {Spin,Upload,Alert} from 'antd';
import GetPackStepInfo from '../mutation/GetPackStepInfoMutation'
import {ViewImgList} from '../components/PackStep_Header'
import '../css/productionDigestImage.css'
import Config from "../../../../util/Config"
export default class A extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            fileList:[],
            isLoading:true,
            previewImg:{curImgSrc:"",curImgName:""},   //当前图片预览链接
            isPreview:false,
            fileUpdataList:[]
        };
        this.FixedImgSrc = Config.qiuniu;
        this.pdId = this.props.pdId;

        this.cancelPreview = this.cancelPreview.bind(this);
        this.handlePreview = this.handlePreview.bind(this);
    }

    componentWillMount(){}

    componentDidMount(){
        Relay.Store.commitUpdate(new GetPackStepInfo({
                pdId:this.pdId
            }),{
                onSuccess:(res)=>{
                    console.log(res);
                    let data = res.getPackStepInfo.getPackStepInfo;
                    if(data.errorCode == 0){

                        let A,B;
                        if( data.packStep ){
                            A = JSON.parse(data.packStep.imgJson);
                            B = JSON.parse(data.packStep.fileJson);
                        }else{A = []; B = [];}

                        this.setState({
                            fileList:A,
                            fileUpdataList:B
                        })
                    }else if(data.errorCode == 500){
                        message.error("服务器错误，请联系系统管理员")
                    }

                    this.setState({ isLoading:false})
                },
                onFailure:()=>{
                    this.setState({ isLoading:false});
                    message.error("拉取数据失败，请检查网络连接")
                }
            }
        );
    }

    handlePreview(index){
        this.setState({
            isPreview:true,
            previewImg: {
                curImgSrc: this.FixedImgSrc + this.state.fileList[index].file.response.key,
                curImgName: this.state.fileList[index].file.name
            }
        })
    }

    cancelPreview(){
        this.setState({
            isPreview:false,
            curImgSrc:""
        })
    }

    //sadsds
    render(){
        const {isLoading,fileList,previewImg,isPreview,fileUpdataList} = this.state;
        return(
            <div className="productionDigestImage_look process_demandlook">
                <Spin
                    tip="加载中"
                    spinning={isLoading}
                    wrapperClassName="productionDigestImage_look_loading"
                >
                    {
                        fileList.length !==0 &&
                        <div className="productionDigestImage_look_clear">
                            {
                                fileList.map((item,index)=>
                                    <ViewImgList
                                        key={item.file.uid}
                                        imgSrc={`${this.FixedImgSrc + item.file.response.key}`}
                                        imgName={item.file.name}
                                        handlePreview={(e)=>this.handlePreview(index)}
                                        textValue={item.text}
                                    />
                                )
                            }
                        </div>
                    }

                    {/*上传文件*/}
                    {
                        fileUpdataList.length !== 0 &&
                        <div>
                            <Upload
                                key="fileList"
                                listType="text"
                                className="poduction_techRequ_updataFile"
                                fileList={fileUpdataList}
                            />
                        </div>
                    }

                    {
                        fileUpdataList.length === 0 && fileList.length ===0 &&
                        <p className="production_look_empty">
                            <i>  </i>
                            <span>暂无数据</span>
                        </p>
                    }


                    <Modal
                        className="production_preview"
                        visible={isPreview}
                        width={800}
                        footer={null}
                        onCancel={this.cancelPreview}
                    >
                        <img src={previewImg.curImgSrc} style={{ width: '100%' }} alt={previewImg.curImgName}/>
                    </Modal>
                </Spin>

            </div>
        )

    }
}